<template>
  <view class="contest-detail-page" :class="{ 'dark-mode': isDarkMode }">
    <!-- 顶部导航栏 -->
    <nav-bar @theme-change="onThemeChange"></nav-bar>
    
    <!-- 比赛内容区域 -->
    <view class="contest-layout">
      <!-- 左侧导航栏 -->
      <view class="sidebar">
        <view 
          v-for="(item, index) in navItems" 
          :key="index"
          class="nav-item"
          :class="{ active: currentTab === item.id }"
          @click="switchTab(item.id)"
        >
          <text class="nav-item-icon" v-if="item.icon">{{ item.icon }}</text>
          <text class="nav-item-text">{{ item.name }}</text>
        </view>
      </view>
      
      <!-- 主内容区域 -->
      <view class="main-content">
        <!-- 顶部时间栏 - 根据图片重新设计 -->
        <view class="contest-time-header">
          <view class="time-container start-time">
            <text class="time-label">开始</text>
            <text class="time-value">{{ formatDate(contest.startTime) || '2023/02/25 23:45' }}</text>
          </view>
          
          <view class="time-container current-time">
            <text class="time-label">当前</text>
            <text class="time-value">{{ getCurrentTime() }}</text>
          </view>
          
          <view class="time-container end-time">
            <text class="time-label">结束</text>
            <text class="time-value">{{ formatDate(contest.endTime) || '2023/02/26 02:00' }}</text>
          </view>
        </view>
        
        <!-- 比赛状态卡片 - 按照图片样式重新设计 -->
        <view class="contest-stats-row">
          <view class="stats-card">
            <text class="stats-label">比赛类型</text>
            <text class="stats-value">{{ contest.format || 'ICPC' }}</text>
          </view>
          
          <view class="stats-card">
            <text class="stats-label">运行状态</text>
            <text class="stats-value status-text">{{ getStatusText(contest.status) || '已结束' }}</text>
          </view>
          
          <view class="stats-card">
            <text class="stats-label">题目数量</text>
            <text class="stats-value">{{ contest.problemCount || '13' }}</text>
          </view>
          
          <view class="stats-card">
            <text class="stats-label">用户数量</text>
            <text class="stats-value">{{ contest.userCount || '10031' }}</text>
          </view>
        </view>
        
        <!-- 题目列表 -->
        <view v-if="currentTab === 'problems' || currentTab === ''" class="content-panel">
          <view class="table">
            <view class="table-header">
              <view class="th problem-col">题目</view>
              <view class="th stats-col">正确/提交</view>
              <view class="th solution-col">解答</view>
            </view>
            
            <view 
              v-for="(problem, index) in problemsList" 
              :key="index"
              class="table-row"
              @click="openProblem(problem.id)"
            >
              <view class="td problem-col">
                <text class="problem-id">{{ problem.id }}.</text>
                <text class="problem-title">{{ problem.title }}</text>
              </view>
              <view class="td stats-col">{{ problem.accepted }} / {{ problem.submissions }}</view>
              <view class="td solution-col">
                <text v-if="problem.status === 'ac'" class="solution-icon solved">✓</text>
                <text v-else-if="problem.status === 'wa'" class="solution-icon attempted">✗</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 提交记录 -->
        <view v-if="currentTab === 'submissions'" class="content-card">
          <view class="card-header">
            <text class="card-title">提交记录</text>
          </view>
          
          <view class="submissions-table">
            <view class="table-header">
              <view class="th id-col">ID</view>
              <view class="th problem-col">题目</view>
              <view class="th status-col">状态</view>
              <view class="th score-col">得分</view>
              <view class="th time-col">时间</view>
              <view class="th memory-col">内存</view>
              <view class="th language-col">语言</view>
              <view class="th submit-time-col">提交时间</view>
            </view>
            
            <view 
              v-for="(submission, index) in submissionsList" 
              :key="index"
              class="table-row"
            >
              <view class="td id-col">#{{ submission.id }}</view>
              <view class="td problem-col">{{ submission.problemId }}</view>
              <view class="td status-col">
                <view class="status-badge" :class="submission.status">
                  {{ getStatusText(submission.status) }}
                </view>
              </view>
              <view class="td score-col">{{ submission.score }}</view>
              <view class="td time-col">{{ submission.time }}</view>
              <view class="td memory-col">{{ submission.memory }}</view>
              <view class="td language-col">{{ submission.language }}</view>
              <view class="td submit-time-col">{{ formatDate(submission.submitTime) }}</view>
            </view>
          </view>
        </view>
        
        <!-- 排行榜 -->
        <view v-if="currentTab === 'ranklist'" class="content-card">
          <view class="card-header">
            <text class="card-title">排行榜</text>
          </view>
          
          <view class="ranklist-table">
            <view class="table-header">
              <view class="th rank-col">排名</view>
              <view class="th user-col">用户</view>
              <view class="th solved-col">解答</view>
              <view class="th penalty-col">罚时</view>
              <view 
                v-for="(problem, index) in problemsList" 
                :key="index"
                class="th problem-status-col"
              >
                {{ problem.id }}
              </view>
            </view>
            
            <view 
              v-for="(user, index) in rankList" 
              :key="index"
              class="table-row"
            >
              <view class="td rank-col">{{ user.rank }}</view>
              <view class="td user-col">{{ user.username }}</view>
              <view class="td solved-col">{{ user.solved }}</view>
              <view class="td penalty-col">{{ user.penalty }}</view>
              <view 
                v-for="(problem, pIndex) in problemsList" 
                :key="pIndex"
                class="td problem-status-col"
              >
                <view 
                  v-if="user.problems[problem.id]" 
                  class="problem-result"
                  :class="user.problems[problem.id].status"
                >
                  <text class="attempt-count">{{ user.problems[problem.id].attempts }}</text>
                  <text v-if="user.problems[problem.id].status === 'ac'" class="solve-time">
                    ({{ user.problems[problem.id].time }})
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
import { getThemeMode } from '@/utils/themeManager.js';

export default {
  components: {
    NavBar
  },
  
  data() {
    return {
      isDarkMode: false,
      currentTab: 'problems',
      contest: {
        id: 1,
        title: 'test',
        startTime: new Date('2023-02-25 23:45:00'),
        endTime: new Date('2023-02-26 02:00:00'),
        status: 'ended',
        format: 'ICPC',
        problemCount: 13,
        userCount: 10031
      },
      navItems: [
        { id: 'info', name: '信息', icon: 'ℹ️' },
        { id: 'problems', name: '题目', icon: '📝' },
        { id: 'submissions', name: '提交', icon: '📊' },
        { id: 'ranklist', name: '排行榜', icon: '🏆' },
        { id: 'settings', name: '设置', icon: '⚙️' }
      ],
      problemsList: [
        { id: 'A', title: '寻宝', accepted: 1234, submissions: 7875, status: 'ac' },
        { id: 'B', title: '挖花', accepted: 2345, submissions: 5674, status: null },
        { id: 'C', title: '计数问题', accepted: 1343, submissions: 6241, status: 'ac' },
        { id: 'D', title: '表达式求值', accepted: 1245, submissions: 2352, status: 'ac' },
        { id: 'E', title: '小朋友的数字', accepted: 1432, submissions: 4564, status: 'ac' },
        { id: 'F', title: '车站分级', accepted: 7779, submissions: 12342, status: 'ac' },
        { id: 'G', title: '环心算测验', accepted: 3453, submissions: 3463, status: 'ac' },
        { id: 'H', title: '比例简化', accepted: 5675, submissions: 7567, status: 'ac' },
        { id: 'I', title: '螺旋矩阵', accepted: 6788, submissions: 13413, status: 'ac' },
        { id: 'J', title: '子矩阵', accepted: 2344, submissions: 3453, status: null },
        { id: 'K', title: '金币', accepted: 3456, submissions: 5675, status: 'ac' },
        { id: 'L', title: '扫雷游戏', accepted: 12345, submissions: 3466, status: 'ac' },
        { id: 'M', title: '求和', accepted: 2345, submissions: 7688, status: 'ac' }
      ],
      submissionsList: [
        { id: 12345, problemId: 'A', status: 'ac', score: 100, time: '10ms', memory: '256KB', language: 'C++', submitTime: new Date('2023-02-25 23:50:00') },
        { id: 12346, problemId: 'B', status: 'wa', score: 0, time: '15ms', memory: '512KB', language: 'Java', submitTime: new Date('2023-02-25 23:55:00') },
        { id: 12347, problemId: 'C', status: 'tle', score: 0, time: '1000ms', memory: '128KB', language: 'Python', submitTime: new Date('2023-02-26 00:05:00') },
        { id: 12348, problemId: 'D', status: 'ac', score: 100, time: '8ms', memory: '64KB', language: 'C', submitTime: new Date('2023-02-26 00:15:00') },
        { id: 12349, problemId: 'E', status: 'mle', score: 0, time: '100ms', memory: '256MB', language: 'Go', submitTime: new Date('2023-02-26 00:25:00') }
      ],
      rankList: [
        {
          rank: 1,
          username: 'topCoder123',
          solved: 13,
          penalty: '02:45:30',
          problems: {
            'A': { status: 'ac', attempts: 1, time: '0:15' },
            'B': { status: 'ac', attempts: 1, time: '0:25' },
            'C': { status: 'ac', attempts: 1, time: '0:40' },
            'D': { status: 'ac', attempts: 1, time: '0:50' },
            'E': { status: 'ac', attempts: 1, time: '1:05' },
            'F': { status: 'ac', attempts: 1, time: '1:15' },
            'G': { status: 'ac', attempts: 1, time: '1:25' },
            'H': { status: 'ac', attempts: 1, time: '1:35' },
            'I': { status: 'ac', attempts: 1, time: '1:45' },
            'J': { status: 'ac', attempts: 2, time: '2:00' },
            'K': { status: 'ac', attempts: 1, time: '2:10' },
            'L': { status: 'ac', attempts: 1, time: '2:25' },
            'M': { status: 'ac', attempts: 1, time: '2:35' }
          }
        },
        {
          rank: 2,
          username: 'codeMaster',
          solved: 12,
          penalty: '02:50:15',
          problems: {
            'A': { status: 'ac', attempts: 1, time: '0:10' },
            'B': { status: 'ac', attempts: 2, time: '0:35' },
            'C': { status: 'ac', attempts: 1, time: '0:45' },
            'D': { status: 'ac', attempts: 1, time: '0:55' },
            'E': { status: 'ac', attempts: 1, time: '1:10' },
            'F': { status: 'ac', attempts: 1, time: '1:20' },
            'G': { status: 'ac', attempts: 1, time: '1:30' },
            'H': { status: 'ac', attempts: 1, time: '1:40' },
            'I': { status: 'ac', attempts: 2, time: '2:05' },
            'J': { status: 'wa', attempts: 3, time: null },
            'K': { status: 'ac', attempts: 1, time: '2:15' },
            'L': { status: 'ac', attempts: 1, time: '2:30' },
            'M': { status: 'ac', attempts: 1, time: '2:40' }
          }
        },
        {
          rank: 3,
          username: 'algorithmsLover',
          solved: 11,
          penalty: '02:40:00',
          problems: {
            'A': { status: 'ac', attempts: 1, time: '0:12' },
            'B': { status: 'ac', attempts: 1, time: '0:22' },
            'C': { status: 'ac', attempts: 1, time: '0:32' },
            'D': { status: 'ac', attempts: 1, time: '0:42' },
            'E': { status: 'ac', attempts: 1, time: '0:52' },
            'F': { status: 'ac', attempts: 1, time: '1:02' },
            'G': { status: 'ac', attempts: 1, time: '1:12' },
            'H': { status: 'ac', attempts: 1, time: '1:22' },
            'I': { status: 'ac', attempts: 1, time: '1:32' },
            'J': { status: 'wa', attempts: 4, time: null },
            'K': { status: 'ac', attempts: 1, time: '1:42' },
            'L': { status: 'wa', attempts: 2, time: null },
            'M': { status: 'ac', attempts: 1, time: '1:52' }
          }
        }
      ]
    };
  },
  
  methods: {
    onThemeChange(isDark) {
      this.isDarkMode = isDark;
    },
    
    switchTab(tabId) {
      this.currentTab = tabId;
    },
    
    openProblem(problemId) {
      console.log('Open problem:', problemId);
      // 处理打开题目
    },
    
    formatDate(dateStr) {
      if (!dateStr) return '';
      
      const date = new Date(dateStr);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      }).replace(/\//g, '/');
    },
    
    getCurrentTime() {
      const now = new Date();
      return now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
    },
    
    getStatusText(status) {
      const statusMap = {
        'upcoming': '即将开始',
        'ongoing': '进行中',
        'ended': '已结束'
      };
      return statusMap[status] || status;
    }
  },
  
  mounted() {
    // 检查当前主题
    const themeMode = getThemeMode();
    this.isDarkMode = themeMode === 'dark';
  }
};
</script>

<style>
.contest-detail-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f9fa;
  color: #333;
}

.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

.contest-layout {
  display: flex;
  flex: 1;
}

/* 侧边栏样式 */
.sidebar {
  width: 180px;
  background-color: white;
  border-right: 1px solid #eee;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px); /* 减去导航栏高度 */
  position: fixed;
  left: 0;
  padding-top: 20px;
}

.dark-mode .sidebar {
  background-color: #1e1e1e;
  border-right-color: #333;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background-color: #f5f5f5;
}

.dark-mode .nav-item:hover {
  background-color: #252525;
}

.nav-item.active {
  background-color: #e6f7ff;
  border-left-color: #20C0B8;
  color: #20C0B8;
}

.dark-mode .nav-item.active {
  background-color: rgba(32, 192, 184, 0.1);
}

.nav-item-icon {
  margin-right: 10px;
  font-size: 16px;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  margin-left: 180px;
  padding: 20px;
}

/* 顶部时间栏 - 完全根据图片重新设计 */
.contest-time-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.dark-mode .contest-time-header {
  border-bottom-color: #333;
}

.time-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
}

.dark-mode .time-label {
  color: #aaa;
}

.time-value {
  font-size: 15px;
  font-weight: 500;
}

/* 比赛状态卡片 - 完全根据图片重新设计 */
.contest-stats-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.stats-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22%;
  padding: 15px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark-mode .stats-card {
  background-color: #1e1e1e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.stats-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.dark-mode .stats-label {
  color: #aaa;
}

.stats-value {
  font-size: 22px;
  font-weight: 600;
}

.status-text {
  color: #20C0B8;
}

/* 内容面板 */
.content-panel {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.dark-mode .content-panel {
  background-color: #1e1e1e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 表格样式 */
.table {
  width: 100%;
}

.table-header {
  display: flex;
  padding: 15px;
  background-color: #fafafa;
  border-bottom: 1px solid #eee;
}

.dark-mode .table-header {
  background-color: #252525;
  border-bottom-color: #333;
}

.th {
  font-weight: 500;
  color: #666;
}

.dark-mode .th {
  color: #aaa;
}

.table-row {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
  cursor: pointer;
}

.table-row:last-child {
  border-bottom: none;
}

.dark-mode .table-row {
  border-bottom-color: #333;
}

.table-row:hover {
  background-color: #f9f9f9;
}

.dark-mode .table-row:hover {
  background-color: #252525;
}

.problem-col { 
  flex: 3;
  display: flex;
  align-items: center;
}

.stats-col, .solution-col { 
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.problem-id {
  color: #666;
  margin-right: 8px;
  font-weight: 500;
}

.dark-mode .problem-id {
  color: #aaa;
}

.problem-title {
  font-weight: normal;
}

.solution-icon {
  font-size: 16px;
  font-weight: bold;
}

.solution-icon.solved {
  color: #52c41a;
}

.solution-icon.attempted {
  color: #ff4d4f;
}

/* 提交记录卡片样式 */
.content-card {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 20px;
}

.dark-mode .content-card {
  background-color: #1e1e1e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.dark-mode .card-header {
  border-bottom-color: #333;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
}

.submissions-table {
  padding: 20px;
}

.submissions-table .table-header {
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.dark-mode .submissions-table .table-header {
  background-color: #252525;
  border-bottom-color: #333;
}

.submissions-table .table-row {
  border-bottom: 1px solid #eee;
}

.dark-mode .submissions-table .table-row {
  border-bottom-color: #333;
}

.submissions-table .table-row:hover {
  background-color: #f5f8fa;
}

.dark-mode .submissions-table .table-row:hover {
  background-color: #1a1a1a;
}

.submissions-table .td {
  padding: 14px 16px;
  font-size: 14px;
}

.submissions-table .id-col {
  flex: 0.8;
  text-align: center;
}

.submissions-table .problem-col {
  flex: 1.5;
}

.submissions-table .status-col {
  flex: 0.8;
  text-align: center;
}

.submissions-table .score-col {
  flex: 0.8;
  text-align: center;
}

.submissions-table .time-col {
  flex: 0.8;
  text-align: center;
}

.submissions-table .memory-col {
  flex: 0.8;
  text-align: center;
}

.submissions-table .language-col {
  flex: 0.8;
  text-align: center;
}

.submissions-table .submit-time-col {
  flex: 1.5;
}

/* 排行榜卡片样式 */
.ranklist-table {
  padding: 20px;
}

.ranklist-table .table-header {
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.dark-mode .ranklist-table .table-header {
  background-color: #252525;
  border-bottom-color: #333;
}

.ranklist-table .table-row {
  border-bottom: 1px solid #eee;
}

.dark-mode .ranklist-table .table-row {
  border-bottom-color: #333;
}

.ranklist-table .table-row:hover {
  background-color: #f5f8fa;
}

.dark-mode .ranklist-table .table-row:hover {
  background-color: #1a1a1a;
}

.ranklist-table .rank-col {
  flex: 0.8;
  text-align: center;
}

.ranklist-table .user-col {
  flex: 1.5;
}

.ranklist-table .solved-col {
  flex: 0.8;
  text-align: center;
}

.ranklist-table .penalty-col {
  flex: 0.8;
  text-align: center;
}

.ranklist-table .problem-status-col {
  flex: 0.8;
  text-align: center;
}

.ranklist-table .problem-result {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
}

.ranklist-table .problem-result.ac {
  background-color: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.ranklist-table .problem-result.wa {
  background-color: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}

.dark-mode .ranklist-table .problem-result.ac {
  background-color: rgba(82, 196, 26, 0.2);
}

.dark-mode .ranklist-table .problem-result.wa {
  background-color: rgba(255, 77, 79, 0.2);
}

.ranklist-table .attempt-count {
  font-weight: 600;
}

.ranklist-table .solve-time {
  font-size: 11px;
  opacity: 0.8;
  margin-left: 4px;
}
</style> 